<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <input type="text" name="username" placeholder="请输入用户名" id="username">
    <span id="usernameSpan"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"> <br>
    <button>提交</button>
</form>
<!--  导入axios类库  -->
<script type="text/javascript" src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    /*
        说明：
            1.后台地址url："http://localhost:8080/registerServlet"
            2.后台需要根据key即参数名是username来获取前端提交的用户名数据
            3.后台已经存在的用户名是："岩岩"
     */
    //为用户名标签栏绑定事件
document.getElementById("username").onblur=function(){
    //获取用户名输入栏输入的数据
    let usernameValue = this.value;

    //判断数据是否为空
    if(usernameValue.trim()){
        //数据不为空,向后台发送请求
        axios.get("http://localhost:8080/registerServlet?username="+usernameValue)
        .then(resp=>{
            //判断后台是否已经存在
            if(resp.data){
                //可以注册
                document.getElementById("usernameSpan").innerHTML="恭喜,注册成功";
                document.getElementById("usernameSpan").style.color="green";
            }else{
                //不能注册
                document.getElementById("usernameSpan").innerHTML="该用户名已注册";
                document.getElementById("usernameSpan").style.color="red";
    
            }
        });
        
    }
}

</script>
</body>

</html>